<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable width="80%">
		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="130px" v-loading="loading">
			<el-row :gutter="24">
				<el-col :span="14">
					<el-row :gutter="24">
						<el-col :span="12" class="mb20">
							<el-form-item label="设备编码" prop="equipmentCode"> <el-input v-model="form.equipmentCode" placeholder="请输入" /> </el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备名称" prop="name"> <el-input v-model="form.name" placeholder="请输入" /> </el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="所属区域" prop="airSiteId">
								<el-select v-model="form.airSiteId" placeholder="请选择所属区域">
									<el-option v-for="item in siteList" :key="item.id" :value="item.id" :label="item.name"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="所属企业" prop="deptId">
								<el-tree-select
									v-model="form.deptId"
									:data="parentData"
									:props="{ value: 'id', label: 'name', children: 'children', disabled: 'isLock' }"
									class="w100"
									clearable
									check-strictly
									:render-after-expand="false"
									placeholder="请选择所属企业"
									@change="handleTreeChange"
								/>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12" class="mb20">
							<el-form-item label="运维企业" prop="devOpsEnterpriseId">
								<el-select v-model="form.devOpsEnterpriseId" placeholder="请选择运维企业">
									<el-option v-for="item in devopsList" :key="item.id" :value="item.id" :label="item.devOpsEnterprise"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="12" class="mb20">
							<el-form-item label="管理员" prop="gridMemberId">
								<el-select v-model="form.gridMemberId" placeholder="请选择管理员">
									<el-option v-for="item in gridList" :key="item.id" :value="item.id" :label="item.name"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备型号" prop="equipmentModelId">
								<el-select v-model="form.equipmentModelId" placeholder="请选择设备型号">
									<el-option v-for="item in equipmentList" :key="item.id" :value="item.id" :label="item.name"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备状态" prop="status">
								<el-select v-model="form.status" placeholder="请选择设备状态">
									<el-option :value="1" label="离线"> </el-option>
									<el-option :value="2" label="在线"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12" class="mb20">
							<el-form-item label="手机卡号" prop="mobileCardNumber">
								<el-input v-model="form.mobileCardNumber" placeholder="请输入" maxlength="11" /> </el-form-item
						></el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="手机卡运营商" prop="operatorId">
								<el-select v-model="form.operatorId" placeholder="请选择手机卡运营商">
									<el-option v-for="item in operatorList" :key="item.id" :value="item.id" :label="item.operatorName"> </el-option>
								</el-select>
							</el-form-item>
						</el-col> -->

						<el-col :span="12" class="mb20">
							<el-form-item label="经度" prop="longitude">
								<el-input-number v-model="form.longitude" placeholder="请输入经度" maxlength="10" />
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="安装时间" prop="installationTime">
								<el-date-picker v-model="form.installationTime" type="datetime" placeholder="请选择安装时间" value-format="YYYY-MM-DD HH:mm:ss" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="纬度" prop="latitude">
								<el-input-number v-model="form.latitude" placeholder="请输入纬度" maxlength="10" />
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12" class="mb20">
							<el-form-item label="应用状况" prop="applicationStatusId">
								<el-select v-model="form.applicationStatusId" placeholder="请选择应用状况">
									<el-option v-for="item in appStatusList" :key="item.id" :value="item.id" :label="item.name"> </el-option>
								</el-select>
							</el-form-item>
						</el-col> -->

						<el-col :span="12" class="mb20">
							<el-form-item label="地址" prop="address">
								<el-input v-model="form.address" placeholder="请输入地址" />
							</el-form-item>
						</el-col>

						<el-col :span="12" class="mb20">
							<el-form-item label="数据模板" prop="dataTemplateId">
								<el-select v-model="form.dataTemplateId" placeholder="请选择数据模板">
									<el-option v-for="item in templateList" :key="item.id" :value="item.id" :label="item.templateName"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备类型" prop="equipmentTypeId">
								<el-select v-model="form.equipmentTypeId" placeholder="请选择设备类型">
									<el-option v-for="item in equipmentTypeList" :key="item.id" :value="item.id" :label="item.typeName"> </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12" class="mb20"></el-col> -->
					</el-row>
					<el-row>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备安装前照片" prop="beforeEquipmentInstall">
								<ImageUpload v-model:imageUrl="form.beforeEquipmentInstall"> </ImageUpload>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="设备安装后照片" prop="afterEquipmentInstall">
								<ImageUpload v-model:imageUrl="form.afterEquipmentInstall"> </ImageUpload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="10">
					<MapArea
						class="h-[490px] w-full"
						ref="mapRef"
						@select="handleSelect"
						v-if="visible"
						:latitude="form.latitude"
						:longitude="form.longitude"
					/>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="AirMonitorEquipmentDialog">
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/platform/airMonitorEquipment';
import { fetchListAll as fetchSiteList } from '/@/api/platform/airSite';
// import { fetchListAll as fetchDevOpsList } from '/@/api/platform/basicDevOpsEnterprise';
import { fetchListAll as fetchGridList } from '/@/api/platform/airGridMember';
import { fetchListAll as fetchEquipmentList } from '/@/api/platform/basicEquipmentModel';
// import { fetchListAll as fetchOperatorList } from '/@/api/platform/basicOperator';
// import { fetchListAll as fetchAppStatusList } from '/@/api/platform/basicApplicationStatus';
import { listByDeptId as fetchTemplateList } from '/@/api/platform/dataTemplate';
import { fetchListAll as fetchEquipmentTypeList } from '/@/api/platform/basicEquipmentType';
import { deptTree } from '/@/api/admin/dept';
import MapArea from './components/map.vue';
import { rule } from '/@/utils/validate';
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
const emit = defineEmits(['refresh']);
const parentData = ref<any[]>([]);
// 定义变量内容
const dataFormRef = ref();
const mapRef = ref();
const visible = ref(false);
const loading = ref(false);
const siteList: any = ref([]);
// const devopsList: any = ref([]);
const gridList: any = ref([]);
const equipmentList: any = ref([]);
// const operatorList: any = ref([]);
// const appStatusList: any = ref([]);
const templateList: any = ref([]);
const equipmentTypeList: any = ref([]);
// 定义字典

// 提交表单数据
const form = reactive({
	id: '',
	name: '',
	equipmentCode: '',
	airSiteId: null,
	gridMemberId: null,
	equipmentModelId: null,
	// mobileCardNumber: '',
	// operatorId: null,
	installationTime: '',
	deptId: null,
	// applicationStatusId: null,
	dataTemplateId: null,
	equipmentTypeId: null,
	beforeEquipmentInstall: '',
	afterEquipmentInstall: '',
	monitorTypeName: '',
	monitorType: 0,
	siteName: '',
	siteId: null,
	monitorIndicater: 0,
	status: 1,
	isModifiedCoordinate: 0,
	longitude: 0,
	latitude: 0,
	// devOpsEnterpriseId: null,
	address: '',
});

// 定义校验规则
const dataRules = ref({
	// afterEquipmentInstall: [{ required: true, message: '请上传', trigger: 'change' }],
	// beforeEquipmentInstall: [{ required: true, message: '请上传', trigger: 'blur' }],
	equipmentCode: [{ required: true, message: '请输入', trigger: 'blur' }],
	name: [{ required: true, message: '请输入', trigger: 'blur' }],
	airSiteId: [{ required: true, message: '请选择', trigger: 'change' }],
	deptId: [{ required: true, message: '请选择', trigger: 'change' }],
	// devOpsEnterpriseId: [{ required: true, message: '请选择', trigger: 'change' }],
	gridMemberId: [{ required: true, message: '请选择', trigger: 'change' }],
	equipmentModelId: [{ required: true, message: '请选择', trigger: 'change' }],
	status: [{ required: true, message: '请选择', trigger: 'change' }],
	longitude: [
		{ required: true, message: '请输入', trigger: 'blur' },
		{ validator: rule.number, trigger: 'blur' },
	],
	latitude: [
		{ required: true, message: '请输入', trigger: 'blur' },
		{ validator: rule.number, trigger: 'blur' },
	],
	// operatorId: [{ required: true, message: '请选择', trigger: 'change' }],
	installationTime: [{ required: true, message: '请选择', trigger: 'change' }],
	// applicationStatusId: [{ required: true, message: '请选择', trigger: 'change' }],
	dataTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
	equipmentTypeId: [{ required: true, message: '请选择', trigger: 'change' }],
	// mobileCardNumber: [
	// 	{ required: true, message: '手机卡号不能为空', trigger: 'blur' },
	// 	{ validator: rule.number, trigger: 'blur' },
	// ],
});

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	form.id = '';
	form.address = '';
	form.status = 1;
	form.latitude = 0;
	form.longitude = 0;
	templateList.value = [];

	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
	getSiteList();
	// getDevOpsList();
	getGridList();
	getEquipmentList();
	// getOperatorList();
	// getAppStatusList();
	// getTemplateList();
	getEquipmentTypeList();
	getDeptData();
	// 获取airMonitorEquipment信息
	if (id) {
		form.id = id;
		getairMonitorEquipmentData(id);
	}
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 初始化表单数据
const getairMonitorEquipmentData = (id: string) => {
	// 获取数据
	loading.value = true;
	getObj(id)
		.then((res: any) => {
			Object.assign(form, res.data);
			nextTick(() => {
				unref(mapRef)?.handleMarkerPos({ longitude: form.longitude, latitude: form.latitude });
			});
		})
		.finally(() => {
			loading.value = false;
		});
};

// 地图位置
const handleSelect = (data: any) => {
	form.latitude = data.latitude;
	form.longitude = data.longitude;
	form.address = data.address.length ? data.address : '';
};
// 查询全部企业
const getSiteList = () => {
	fetchSiteList().then((res) => {
		siteList.value = res.data;
	});
};
// 查询全部运维企业
// const getDevOpsList = () => {
// 	fetchDevOpsList().then((res) => {
// 		devopsList.value = res.data;
// 	});
// };
// 查询全部管理员
const getGridList = () => {
	fetchGridList().then((res) => {
		gridList.value = res.data;
	});
};
// 查询全部设备型号
const getEquipmentList = () => {
	fetchEquipmentList().then((res) => {
		equipmentList.value = res.data;
	});
};
// 查询全部手机卡运营商
// const getOperatorList = () => {
// 	fetchOperatorList().then((res) => {
// 		operatorList.value = res.data;
// 	});
// };
// 查询全部应用状态
// const getAppStatusList = () => {
// 	fetchAppStatusList().then((res) => {
// 		appStatusList.value = res.data;
// 	});
// };
// 查询全部数据模板
const getTemplateList = (id: string) => {
	fetchTemplateList(id).then((res) => {
		templateList.value = res.data;
	});
};
// 查询全部设备类型
const getEquipmentTypeList = () => {
	fetchEquipmentTypeList().then((res) => {
		equipmentTypeList.value = res.data;
	});
};
// 从后端获(企业)信息
const getDeptData = async () => {
	deptTree().then((res) => {
		parentData.value = res.data;
	});
};
// 选择企业查询数据模板
const handleTreeChange = (e: string) => {
	templateList.value = [];
	form.dataTemplateId = null;
	getTemplateList(e);
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
